//签字弹窗
<template>
  <u-popup :show.sync="visible" mode="center"  :closeOnClickOverlay="false" >
    <view style="padding: 20px; background: #fff; width: 300px;">
        <component
          :is="getComponent(boxType)"
          v-model="inputObj.fieldValue"
          :options="checkboxOptions"
          style="max-width: 100%;"
          @selectImg="changeSelectImg"
        />
    </view>
    <view style="display: flex; gap: 20px; padding: 0 20px; padding-bottom: 20px;">
      <u-button  style="width: 100px;" size="small" text="取消" @click="handleClose"></u-button>
      <u-button  style="width: 100px;" type="primary" size="small" text="确认" @click="handleConfirm"></u-button>
    </view>
  </u-popup>
</template>

<script>
import SignatureText from '@/pages/petition/common/typeComs/SignatureText.vue'
import SignatureImage from '@/pages/petition/common/typeComs/SignatureImage.vue'
export default {
  name: "SignatureInputDialog",
  components: {
    SignatureImage,
    SignatureText,
  },
  props: {
    signerInfo: {
      type: Object,
      required: false,
    },
    visible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      inputObj: null,
      boxType: null,
      checkboxOptions: [
        { label: "選項A", value: "A" },
        { label: "選項B", value: "B" },
        { label: "選項C", value: "C" },
      ],
    };
  },
  watch: {
    signerInfo: {
      immediate: true,
      handler(newVal) {
        // 浅拷贝避免直接修改原对象
        this.inputObj = { ...newVal };
        this.boxType = this.inputObj.boxType;
      },
      deep: true,
    },
  },
  methods: {
    getComponent(type) {
      switch (type) {
        case 1:
          return SignatureImage; // 你需自行实现签字板组件
        case 2:
          return SignatureText;
        case 3:
          return "el-input";
        case 4:
          return "el-checkbox-group";
        default:
          return "div";
      }
    },
    handleClose() {
      this.$emit("closeFun", false);
    },
    changeSelectImg(id) {
      // 签字或者签章时选择图片得id
      this.inputObj.selectImgId = id;
    },
    handleConfirm() {
      this.$emit("save", this.inputObj);
      this.handleClose();
    },
  },
};
</script>
